<template>
    <div class="client_list">
        <dl v-for="(item, key) in clientList" :key="key" v-if="tishi" @click="todetails(item.userId, item.shenfen)">
            <dt>
                <div class="client_list_img">
                    <img :src="item.userPhoto" alt="">
                </div>
                <div class="client_list_msg">
                    <h5>
                        {{item.userName}}
                        <mark v-if="item.grade" :class="'c' + key">{{item.grade}}</mark>
                    </h5>
                    <div class="client_list_msg_num">
                        <span>服务单数：{{item.count}}</span>
                        <span>服务总金额：￥{{item.shenfen == 1 ? item.masterGetPrice : item.totalPrice}}</span>
                    </div>
                    <div class="createTime">入驻时间：{{item.createTime}}</div>
                </div>
            </dt>
            <dd>我的分账：￥{{(item.shenfen == 1 ? item.masterGetPrice : item.totalPrice)/10}}</dd>
        </dl>
        <div v-if="tishi" class="more" @click="loadMore">{{more}}</div>
        <blank v-if="!tishi" :title="'暂未邀请用户'"></blank>
    </div>
</template>

<script>
    import Vue from 'vue'
    import {Selector} from "vux";
    Vue.component('selector', Selector)
    import blank from '@/components/masterInfo/blank'
    export default {
        name: 'clientUser',
        components: {
            blank
        },
        data() {
            return {
                offset: 0,
			    limit: 5,
                clientList: [],
                tishi: true,
                more: '加载更多'
            }
        },
        methods: {
            operator_next() {
                let params = {
                    userId: this.$store.state.userId,
                    offset: this.offset,
                    limit: this.limit,
                    shenfen: 2
                }
                this.$http.fetchGet('operator_next', params).then(res => {
                    if(res.code == 200) {
                        if(this.offset == 0) this.clientList = res.data;
                        else this.clientList.push(...res.data);
                        if(res.data.length == 0) this.offset -= this.limit;
                        this.tishi = this.clientList.length > 0 ? true : false
                    } else {
                        // this.$vux.toast.text('无更多数据')
                        this.more = '加载完毕'
                    }
                }, err => {

                })
            },
            todetails(uId, uType) {
                this.$router.push({
                    path: '/clientDetails',
                    query: {
                        uId: uId,
                        uType: uType
                    }
                })
            },
            refresh(done) {
                this.offset = 0;
                this.operator_next(done);
            },
            infinite(done) {
                this.offset += this.limit;
                this.operator_next(done);
            },
            loadMore() {
                this.offset += this.limit;
                this.operator_next()
                console.log(this.offset)
            }
        },
        created() {
            this.operator_next()
        }
    }
</script>

<style lang="less" scoped>
.client_list{
    dl{
        background: #fff;
        .mb(20);
        dt{
            .p(20);
            display: flex;
            .client_list_img{
                .w(180);
                .h(180);
                border-radius: 5px;
                overflow: hidden;
                img{
                    width: 100%;
                }
            }
            .client_list_msg{
                .pl(20);
                h5{
                    .lh(60);
                    .f30;
                    font-weight: normal;
                    mark{
                        .f18;
                        color: #ffffff;
                        .bri(5);
                        .ml(15);
                        .pt(3);
                        .pb(3);
                        .pl(8);
                        .pr(8);
                        &.c0{
                            background-color: #ff607a;
                        }
                        &.c1{
                            background-color: #fead58;
                        }
                        &.c2{
                            background-color: #59d3ac;
                        }
                        &.c3{
                            background-color: #37c5e2;
                        }
                        &.c4{
                            background-color: #9dc3e6;
                        }
                        &.busy{
                            background-color: rgb(237, 126, 85);
                        }
                    }
                }
                .client_list_msg_num{
                    .lh(60);
                    .f28;
                    span{
                        .mr(10);
                    }
                }
                .createTime{
                    .lh(60);
                    .f28;
                    color: #999;
                }
            }
        }
        dd{
            .lh(88);
            .pl(20);
            border-top: 1px solid #f2f2f2;
        }
    }
    .more {
    text-align: center;
    color: @primary;
    background: #fff;
    .lh(80);
  }
}
</style>
